/**
* Created by tanyichao on 2017/3/23.
*/
<template>
    <div class="page_container">
        <!--<x-header>This is the page title.</x-header>-->
        <scroller lock-x ref="scroller">
            <div class="order-confirm-info">
                <div class="head">
                    <img :src="foodCode.storeImg | urlFilterAddServer" alt="">
                    <span>{{ foodCode.storeName}}</span>
                </div>
                <div class="info">
                    <!--<p class="status">-->
                    <!--<icon type="success-no-circle"></icon>-->
                    <!--扫码成功！-->
                    <!--</p>-->
                    <p class="order-code" v-if="foodCode.takeFoodCode == '正在准备您的订单'"><span class="info-color-red">{{ foodCode.takeFoodCode }}</span></p>

                    <p class="order-code" v-if="foodCode.takeFoodCode != '正在准备您的订单'">您的取餐号是：<span class="info-color-red">{{ foodCode.takeFoodCode }}</span></p>
                  <!--   <p class="order-time">我们已经开始在准备您的订单，预计<span
                        class="info-color-red">{{foodCode.takeFoodTime}}分钟</span>后可以取餐，请留意门店屏幕上的取餐号码或者留意微信公众号消息提醒。
                    </p> -->
                      <p class="order-time">我们已经开始在准备您的订单，请留意门店屏幕上的取餐号码以及微信公众号消息提醒。
                    </p>
                </div>
                <div class="codeImg">
                    <img :src="foodCode.qrcode | urlFilterAddServer" alt="">
                </div>
                <div class="order-confirm-info-btn" @click="orderInfoBack">返回</div>
            </div>

        </scroller>
        <alert v-model="textShow" @on-hide="onAlertHide">{{ foodCodeText }}</alert>
    </div>
</template>


<script>
    import {XHeader, Scroller, Icon, Alert} from 'vux'

    import {getTakeFoodCodeService} from '../services/index'

    // import Vue from 'vue'
    // import {AlertPlugin,ToastPlugin} from 'vux'
    // Vue.use(AlertPlugin)


    export default {
        components: {
            XHeader,
            Scroller,
            Icon,
            Alert
        },
        data(){
            return {
                orderId: '',
                foodCode: {},
                textShow: false,
                foodCodeText: '订单没有相关取餐码！按确定返回到订单详情！'
            }
        },
        activated(){


            // if (this.orderId == '' || this.orderId != this.$route.query.orderId) {

            //     this.orderId = this.$route.query.orderId;
            //     this.getTakeFoodCode();
            // }

            /**
             * John modify
             */
            this.orderId = this.$route.query.orderId;
            this.getTakeFoodCode();

        },
        mounted(){
        },
        methods: {
            getTakeFoodCode(){

                var that = this;                              

                getTakeFoodCodeService().save({orderId: this.orderId}).then((res) => {
                    const bode = res.body;
                    if (bode && bode.code == 200) {
                        // that.$vux.alert.show({
                        //     title : "我每次都有进来请求的了",
                        //     content : JSON.stringify(bode.date),
                        //     onShow : function(){},
                        //     onHide : function(){}
                        // })
                        this.foodCode = bode.date;
                    } else {
                        this.textShow = true;
                    }
                })
            },
            orderInfoBack(){
                this.$router.back();
            },
            onAlertHide(){
                this.textShow = true;
                this.$router.bacek();
            },

        },
        watch: {},
        created(){
        },
        computed: {}
    }
</script>
<style lang="less" rel="stylesheet/less">
    .order-confirm-info {
        .head {
            display: flex;
            flex-flow: row nowrap;
            font-size: 0.6rem;
            background-color: #fff;
            justify-content: flex-start;
            align-items: center;
            padding: 0.5rem 1rem;

            img {
                width: 1rem;
                height: 1rem;
            }
            span {
                margin-left: 0.25rem;
            }
        }
        .info {
            width: 100%;
            height: auto;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            padding: 1rem;
            position: relative;
            font-size: 0.75rem;
            .status {
                font-size: 1rem;
            }
            .order-code {
                margin-top: 1rem;
                color: #999;
            }
            .order-time {
                margin-top: 1rem;
                color: #999;
            }
            .info-color-red {
                color: red;
            }
        }
        .codeImg img {
            width: 60%;
            margin: 0 20%;
        }

    }

    .order-confirm-info-btn {
        width: 10rem;
        height: 1.5rem;
        position: relative;
        /*bottom: 6rem;*/
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        line-height: 1.5rem;
        border: 1px solid #FC7837;
        color: #FC7837;
        border-radius: 5px;
        font-size: 0.75rem;
        margin-top: 1rem;
    }
</style>
